<!-- 新增编辑呈批件 -->
<template>
  <div class="app-container">
    <el-form  ref="form"  class="work-search-form" :model="form" :rules="rules" label-width="120px">
        <!-- <el-row>
            <el-col :span=12>
                <el-form-item label="姓名" prop="account_number">
                    <el-select v-model="form.pressing" placeholder="请选择部门"> 
                    <el-option-
                        v-for="dict in degreeOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                    />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span=12>
                <el-form-item label="身份证号" prop="pressing">
                    <el-select v-model="form.pressing" placeholder="请选择订单">
                    <el-option
                        v-for="dict in degreeOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                    />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span=12>
                <el-form-item label="联系方式" prop="pressing">
                    <el-select v-model="form.pressing" placeholder="请选择归属大类">
                    <el-option
                        v-for="dict in degreeOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                    />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span=12>
                 <el-form-item label="现住址" prop="pressing">
                    <el-select v-model="form.pressing" placeholder="请选择归属小类">
                    <el-option
                        v-for="dict in degreeOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                    />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row> -->
        
       <el-row>
            <el-col :span=12>
                <el-form-item label="员工工号" prop="account_number">
                    <el-input v-model="form.account_number" placeholder="请输入员工工号" />
                </el-form-item>
            </el-col>
            <el-col :span=12>
                <el-form-item label="部门ID" prop="dept_id" >
                    <el-input v-model="form.dept_id" placeholder="请输入部门ID" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="员工姓" prop="first_name">
                    <el-input v-model="form.first_name" placeholder="请输入员工姓" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="员工名" prop="last_name">
                    <el-input v-model="form.last_name" placeholder="请输入员工名" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="员工姓名" prop="full_name">
                  <el-input v-model="form.full_name" placeholder="请输入员工姓名" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="联系电话" prop="contact_number">
                  <el-input v-model="form.contact_number" placeholder="请输入联系电话" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="员工邮箱" prop="email">
                    <el-input v-model="form.email" placeholder="请输入员工邮箱" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="岗位" prop="designation">
                    <el-input v-model="form.designation" placeholder="请输入岗位" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="家庭住址" prop="base_area">
                    <el-input v-model="form.base_area" placeholder="请输入家庭住址" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="出生日期" prop="birthday">
                    <el-input v-model="form.birthday" placeholder="请输入出生日期" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="合同类型" prop="contract_type">
                    <el-input v-model="form.contract_type" placeholder="请输入合同类型" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="毕业院校" prop="graduate_school">
                    <el-input v-model="form.graduate_school" placeholder="请输入毕业院校" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="最高学历" prop="highest_education">
                    <el-input v-model="form.highest_education" placeholder="请输入最高学历" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="证书" prop="certificate">
                    <el-input v-model="form.certificate" placeholder="请输入证书" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="工作年限" prop="working_year">
                    <el-input v-model="form.working_year" placeholder="请输入工作年限" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="合同结束日期" prop="end_contract">
                    <el-input v-model="form.end_contract" placeholder="请输入合同结束日期" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="交叉工资" prop="cross_salary">
                    <el-input v-model="form.cross_salary" placeholder="请输入交叉工资" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="最低值" prop="de_minimis">
                    <el-input v-model="form.de_minimis" placeholder="请输入最低值" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="月薪" prop="monthly_salary">
                    <el-input v-model="form.monthly_salary" placeholder="请输入月薪" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="hmo_limit" prop="hmo_limit">
                    <el-input v-model="form.hmo_limit" placeholder="请输入hmo_limit" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="附件" prop="url">
          <el-upload
              ref="upload"
              :action="upload.url"
              :headers="upload.headers"
              multiple
              :file-list="upload.fileList"
              :on-success="annexSuccess"
              :before-upload="beforeAttachmentUpload"
              :before-remove="beforeRemove"
              :on-remove="annexRemove">
              <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
              <div slot="tip" style="color: #999; font-size: 12px;"
              v-text="'支持'+fileUploadParams.fileType+'，且不超过'+fileUploadParams.fileSize+'MB'"></div>
          </el-upload>
        </el-form-item>
        <!-- <el-form-item label="上传附件" prop="url">
          <el-upload
            ref="upload"
            accept=".apk"
            :action="upload.url"
            :headers="upload.headers"
            :file-list="upload.fileList"
            :show-file-list="true"
            :limit="1"
            :on-success="annexSuccess"
            :on-remove="annexRemove">
            <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
          </el-upload>
        </el-form-item> -->
        <el-form-item label="审批流程">        
          <el-steps :active="4">
            <el-step
              v-for="(pre,index) in processForm"
              :key="index"
              class="stepSuc"
              style="line-height: 25px;"
              :title="'审批人'+(index+1)"
              :description="pre.taskName" 
            />
            <!-- +'（'+pre.depName+'【'+ pre.postName+'】）' -->
          </el-steps>
        </el-form-item>
    </el-form>
               
    </el-row>
    <div slot="footer" class="dialog-footer" style="text-align:center">
      <template v-if="!params.isEdit">
        <el-button type="primary" :loading="submitLoading" @click="submitForm">提 交</el-button>
      </template>
      <!-- <el-button type="primary" :loading="submitLoading" @click="submitForm(2)">保 存</el-button> -->
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
  import {initShowWorkFlow, addApprovalDoc } from "@/api/system/entry";
  import Editor from '@/components/Editor';
  import { getToken } from "@/utils/auth";
  import { fileUploadParams,getFileNameSuffix } from "@/utils/ruoyi"

  export default {
    name: "AddEditDoc",
    components: {
      Editor
    },
    data() {
      return {
        params: {
          isEdit: false,
        },
        form: {},
        fileUploadParams: fileUploadParams(),
        userInfo: JSON.parse(this.$store.getters.userInfo),
        processForm: [],
        // 缓急程度数据字典
        degreeOptions: [],
        // 密级数据字典
        secretLevelOptions: [],
        //部门列表
        deptList: [],
        // 部门列表
        menuOptions: [],
        defaultProps: {
          children: "children",
          label: "label"
        },
        // 表单校验
        rules: {
          account_number: [
            { required: true, message: "请输入员工工号", trigger: "blur" }
          ],
          dept_id: [
            { required: true, message: "请输入部门ID", trigger: "blur" }
          ],
          first_name: [
            { required: true, message: "请选择员工姓", trigger: "blur" }
          ],
          last_name: [
            { required: true, message: "请选择员工名", trigger: "blur" }
          ],
          full_name: [
            { required: true, message: "请输入员工姓名", trigger: "blur" }
          ],
          contact_number: [
            { required: true, message: "请输入联系电话", trigger: "blur" }
          ],
          email: [
            { required: true, message: "请输入员工邮箱", trigger: "blur" }
          ],
          designation: [
            { required: true, message: "请输入岗位", trigger: "blur" }
          ],
          base_area: [
            { required: true, message: "请输入家庭住址", trigger: "blur" }
          ],
          birthday: [
            { required: true, message: "请输入出生日期", trigger: "blur" }
          ],
          contract_type: [
            { required: true, message: "请输入合同类型", trigger: "blur" }
          ],
          graduate_school: [
            { required: true, message: "请输入毕业院校", trigger: "blur" }
          ],
          highest_education: [
            { required: true, message: "请输入最高学历", trigger: "blur" }
          ],
          certificate: [
            { required: true, message: "请输入证书", trigger: "blur" }
          ],
          working_year: [
            { required: true, message: "请输入工作年限", trigger: "blur" }
          ],
          end_contract: [
            { required: true, message: "请输入合同结束日期", trigger: "blur" }
          ],
          cross_salary: [
            { required: true, message: "请输入交叉工资", trigger: "blur" }
          ],
          de_minimis: [
            { required: true, message: "请输入最低值", trigger: "blur" }
          ],
          monthly_salary: [
            { required: true, message: "请输入月薪", trigger: "blur" }
          ],
          hmo_limit: [
            { required: true, message: "请输入hmo_limit", trigger: "blur" }
          ],
        },
        upload: {
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/business/employee/uploadFiles",
          // 上传的文件列表
          fileList: []
        },
        //表单提交加载项
        submitLoading: false
      }
    },
    created() {   
      const params= {
        processDefinitionKey : ''
      }
      initShowWorkFlow(params).then(res => {
        if (res.code === 200) {
          this.processForm = res.data
        }
      }).catch(()=>{
        
      });
    },
    methods: {
      // 表单重置
      reset() {
        if (this.$refs.menu != undefined) {
          this.$refs.menu.setCheckedKeys([]);
        }
        this.form = {
          account_number: undefined,
          email: undefined,
          designation: undefined,
          base_area: undefined,
          birthday: undefined,
          contract_type: undefined,
          graduate_school: undefined,
          highest_education: undefined,
          certificate: undefined,
          working_year: undefined,
          end_contract: undefined,
          de_minimis: undefined,
          monthly_salary: undefined,
          hmo_limit: undefined,
          fileList: [],        
        };
        this.upload.fileList = [];
        this.resetForm("form");
        this.$nextTick(()=>{
          this.$refs['form'].clearValidate()
        })
      },
      // 取消按钮
      cancel() {
        this.$router.go(-1);// 返回
        //关闭子页面
        this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1);
        var view = {
          name: 'ApprovalDocManage',
        }
        this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
          this.$router.push({
            name: 'ApprovalDocManage'
          });
        })
      },
      /** 提交按钮 */
      submitForm:function() {
        let  params ={
          form: this.form,
          process: this.processForm,
          fileList: this.upload.fileList
        }
        this.$refs["form"].validate(valid => {
          if (valid) {
            //提交入职
            this.submitLoading = true
            addApprovalDoc(params).then((res)=>{
              this.submitLoading = false
              if (res.code === 200) {
                this.msgSuccess("新增并启动流程成功");
                this.cancel();
              }
            }).catch(()=>{
              this.submitLoading = false
            });
          }
        });
      },
      // 跳转到打印单页面
      printTable(){
        this.$store.dispatch('tagsView/delView', {'name':'PrintApprovalDoc'}).then(({ visitedViews }) => {
          this.$router.push({
            name: 'PrintApprovalDoc'
          });
        })
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.msgSuccess(response.msg);
        this.$alert(response.url, '视频地址', {
          dangerouslyUseHTMLString: true
        });
      },
      // 附件上传成功处理
      annexSuccess(response, file, fileList) {
        console.log('附件上传成功处理')
        console.log(response)
        console.log(file)
        console.log(fileList)
        this.form.fileList=fileList
      },
      // 上传之前的处理
      beforeAttachmentUpload(file, fileList){
        console.log('22222', file, fileList)
        // var isTrue = true
        // var fileTypeVerify = this.fileUploadParams.fileType
        // var fileSuffix = getFileNameSuffix(file)
        // if(fileTypeVerify.indexOf(fileSuffix) > -1){
        //   isTrue = true
        // }else{
        //   this.msgError('支持'+this.fileUploadParams.fileType+'，且不超过'+this.fileUploadParams.fileSize+'MB')
        //   isTrue = false
        // }
        // return isTrue;
      },
      //移除文件之前的处理
      beforeRemove(file, fileList){
        let a = true;
        if (file && file.status==="success") {
            a = this.$confirm(`确定移除 ${ file.name }？`);
        }
        return a;
      },
      // 附件上传移除
      annexRemove(file, fileList) {
        console.log(fileList)
        if(file && file.status == "success"){
          this.form.fileList=fileList
          var arr = []
          var arr2 = []
          console.log(this.upload.fileList)
          console.log(this.form.fileList)     
        }
      },
      
      // 类型字典翻译
      typeFormat(row, column) {
        return this.selectDictLabel(this.typeOptions, row.announcementType);
      },
    }
  }
</script>
